<template>
  <div>
    <div style="margin-bottom: 20px" v-if="logType == 0 && infoList.length > 1">
      <el-row :gutter="10">

        <el-col :span="5">
          <el-input style="display: inline-block; margin-left: 2px" v-model="editStocS"
            @input="editStocS = editStocS.replace(/^(0+)|[^\d]+/g, '')" placeholder="请输入商品库存"></el-input>
        </el-col>
        <el-col :span="5">
          <el-button style="display: inline-block; margin-left: 5px" @click="editStockNumber">批量修改</el-button>
        </el-col>
      </el-row>
    </div>

    <div style="margin-bottom: 20px" v-if="logType == 1 && infoList.length > 1">
      <el-row :gutter="20">
        <el-col :span="5">
          <el-input placeholder="供货价" style="margin-left: 5px" v-model="editCost"
            @input="editCost = oninput(editCost, 2)">
            <template slot="append">元</template>
          </el-input>
        </el-col>
        <el-col :span="5">
          <el-input placeholder="零售价" style="margin-left: 5px" v-model="editRetail"
            @input="editRetail = oninput(editRetail, 2)">
            <template slot="append">元</template>
          </el-input>
        </el-col>
        <el-col :span="5" v-if="0>1">
          <el-input placeholder="批发价" style="margin-left: 5px" v-model="editTrade"
            @input="editTrade = oninput(editTrade, 2)">
            <template slot="append">元</template>
          </el-input>
        </el-col>
        <el-col :span="5">
          <el-button style="display: inline-block; margin-left: 5px" @click="editPrice">批量修改</el-button>
        </el-col>
      </el-row>
    </div>

    <div>
      <el-table v-loading="loading" :data="infoList" border>
        <el-table-column label="序号" type="index" :index="indexMethod" align="center">
        </el-table-column>

        <el-table-column v-if="infoList[indexMethod - 1].skuUid == null" label="商品图片" align="center"
          prop="carouselImgOne" width="100">
          <template slot-scope="scope">
            <el-image :z-index="zIndex" v-if="
                scope.row.carouselImgOne != null &&
                scope.row.carouselImgOne != ''
              " slot="reference" :src="scope.row.carouselImgOne" class="image-rows"
              :preview-src-list="[scope.row.carouselImgOne]">
            </el-image>
          </template>
        </el-table-column>

        <el-table-column v-if="infoList[indexMethod - 1].skuUid != null" label="sku图片" align="center" prop="imgCoverUrl"
          width="100">
          <template slot-scope="scope">
            <el-image :z-index="zIndex" v-if="
                scope.row.imgCoverUrl != null && scope.row.imgCoverUrl != ''
              " slot="reference" :src="scope.row.imgCoverUrl" class="image-rows"
              :preview-src-list="[scope.row.imgCoverUrl]">
            </el-image>
          </template>
        </el-table-column>

        <el-table-column v-if="infoList[indexMethod - 1].skuUid == null" label="商品名称" align="center"
          prop="productName"  :show-overflow-tooltip="true"/>
        <el-table-column v-if="infoList[indexMethod - 1].skuUid != null" label="sku名称" align="center"
          prop="valuesDesc" />
        <el-table-column v-if="logType == 1 && infoList[indexMethod - 1].skuUid == null" label="划线价(元)" align="center"
          prop="showPriceStr">
          <template slot-scope="scope">
            <el-input v-if="logType == 1" v-model="scope.row.showPriceStr" @input="
                scope.row.showPriceStr = oninput(scope.row.showPriceStr, 2)
              ">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="供货价(元)" align="center" prop="costPriceStr">
          <template slot-scope="scope">
            <span v-if="logType == 0 && scope.row.skuUid == null">
              {{ scope.row.costPriceStr }}
            </span>
            <span v-if="logType == 0 && scope.row.skuUid != null">
              {{ scope.row.skuCostPriceStr }}</span>
            <el-input v-if="logType == 1 && scope.row.skuUid == null" v-model="scope.row.costPriceStr" @input="
                scope.row.costPriceStr = oninput(scope.row.costPriceStr, 2)
              ">
            </el-input>
            <el-input v-if="logType == 1 && scope.row.skuUid != null" v-model="scope.row.skuCostPriceStr" @input="
                scope.row.skuCostPriceStr = oninput(
                  scope.row.skuCostPriceStr,
                  2
                )
              ">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="零售价(元)" align="center" prop="retailPriceStr">
          <template slot-scope="scope">
            <span v-if="logType == 0 && scope.row.skuUid == null">
              {{ scope.row.retailPriceStr }}
            </span>
            <span v-if="logType == 0 && scope.row.skuUid != null">
              {{ scope.row.skuRetailPriceStr }}
            </span>
            <el-input v-if="logType == 1 && scope.row.skuUid == null" v-model="scope.row.retailPriceStr" @input="
                scope.row.retailPriceStr = oninput(scope.row.retailPriceStr, 2)
              ">
            </el-input>
            <el-input v-if="logType == 1 && scope.row.skuUid != null" v-model="scope.row.skuRetailPriceStr" @input="
                scope.row.skuRetailPriceStr = oninput(
                  scope.row.skuRetailPriceStr,
                  2
                )
              ">
            </el-input>
          </template>
        </el-table-column>

        <!-- <el-table-column label="批发价(元)" align="center" prop="tradePriceStr">
          <template slot-scope="scope">
            <span v-if="logType == 0 && scope.row.skuUid == null">
              {{ scope.row.tradePriceStr }}
            </span>
            <span v-if="logType == 0 && scope.row.skuUid != null">
              {{ scope.row.skuTradePriceStr }}
            </span>
            <el-input v-if="logType == 1 && scope.row.skuUid == null" v-model="scope.row.tradePriceStr" @input="
                scope.row.tradePriceStr = oninput(scope.row.tradePriceStr, 2)
              ">
            </el-input>
            <el-input v-if="logType == 1 && scope.row.skuUid != null" v-model="scope.row.skuTradePriceStr" @input="
                scope.row.skuTradePriceStr = oninput(
                  scope.row.skuTradePriceStr,
                  2
                )
              ">
            </el-input>
          </template>
        </el-table-column>-->

        <el-table-column :label="unitName" align="center" prop="stockNumber" v-if="logType == 0">
          <template slot-scope="scope">
            <el-input v-if="scope.row.skuUid == null" v-model="scope.row.stockNumber" @input="
                scope.row.stockNumber = scope.row.stockNumber.replace(
                  /^(0+)|[^\d]+/g,
                  ''
                )
              ">
            </el-input>
            <el-input v-if="scope.row.skuUid != null" v-model="scope.row.skuStockNumber" @input="
                scope.row.skuStockNumber = scope.row.skuStockNumber.replace(
                  /^(0+)|[^\d]+/g,
                  ''
                )
              ">
            </el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer" style="margin-top: 20px">
      <el-button size="mini" type="text" @click="getLogList">查看修改记录
      </el-button>

      <el-button style="margin-left: 400px" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
    <el-dialog title="操作日志" :visible.sync="open" width="1000px" append-to-body>
      <div>
        <el-table v-loading="logLoad" :data="logList" border max-height="500">
          <el-table-column label="商品名称" align="center" prop="productName" :show-overflow-tooltip="true"/>
          <el-table-column label="sku名称" align="center" prop="valuesDesc" width="100" />
          <el-table-column label="操作类型" align="center" prop="valuesDesc" width="90" :formatter="typeFormat" />
          <el-table-column label="操作内容" align="center" prop="detailInfo" width="300" />
          <el-table-column label="创建人" align="center" prop="createName" width="80" />
          <el-table-column label="创建时间" align="center" prop="createTime" width="180" sortable>
            <template slot-scope="scope">
              <span>{{
                parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}:{s}")
              }}</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getLogList" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    getInfoDetailEdit,
    updateInfoEdit,
    getLog
  } from "@/api/product/info";

  export default {
    name: "productStockNumber",
    props: {
      infoList: {
        type: Array,
        default: [],
      },
      editStock: {
        type: String,
        default: "",
      },
      uid: {
        type: Number,
        default: 0,
      },
      logType: {
        type: Number,
        default: -1,
      },
      unitName:{
        type: String,
        default: "库存",
      }
    },
    data() {
      return {
        //editStock:this.editStocks,
        editStocS: this.editStock,
        editCost: null,
        editRetail: null,
        editTrade: null,
        indexMethod: 1,
        indexMethodLog: 0,
        loading: false,
        //infoList: [],
        infoStock: [],
        zIndex: 3000,
        open: false,
        logList: [],
        logLoad: false,
        logTypeOption: [],
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          productUid: null,
          type: null,
        },
      };
    },
    created() {
      this.getDicts("product_log").then((response) => {
        this.logTypeOption = response.data;
      });
    },
    methods: {
      oninput(num, limit) {
        var str = num;
        var len1 = str.substr(0, 1);
        var len2 = str.substr(1, 1);
        if (str.length > 1 && len1 == 0 && len2 != ".") {
          str = str.substr(1, 1);
        }
        if (len1 == ".") {
          str = "";
        }
        if (str.indexOf(".") != -1) {
          var str_ = str.substr(str.indexOf(".") + 1);
          if (str_.indexOf(".") != -1) {
            str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1);
          }
        }
        //正则替换
        str = str.replace(/[^\d^\.]+/g, ""); // 保留数字和小数点
        if (limit / 1 === 1) {
          str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/, "$1"); // 小数点后只能输 1 位
        } else {
          str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, "$1"); // 小数点后只能输 2 位
        }
        return str;
      },
      cancel() {
        //this.editStock="";
        this.editStocS = "";
        this.$emit("show", false, 0, this.editStocS);
      },
      submitForm() {
        var index = 0;
        if (this.infoList.length > 0) {
          if (this.logType == 0) {
            if (this.infoList[0].skuUid == null) {
              if (
                this.infoList[0].stockNumber == "" ||
                this.infoList[0].stockNumber == null
              ) {
                this.$message.error("库存不能为空！");
                return;
              }
            } else {
              this.infoList.forEach((vo) => {
                if (vo.skuStockNumber == "" || vo.skuStockNumber == null) {
                  if (index == 0) {
                    this.$message.error("库存不能为空！");
                  }
                  index++;
                }
              });
            }
            if (index == 0) {
              let data  = {
                list:this.infoList,
                type:this.logType
              }
              updateInfoEdit(data).then((response) => {
                this.msgSuccess("修改成功");
                this.$emit("show", false, 1, this.editStocS);
              });
            }
          } else if (this.logType == 1) {
            this.infoList[0].logType == 1;
            if (this.infoList[0].skuUid == null) {
              index = this.rules(this.infoList[0], index, 0);
              if (index == 0) {
                let obj = this.infoList[0];
                this.infoList[0].showPrice = obj.showPriceStr;
                this.infoList[0].costPrice = obj.costPriceStr;
                this.infoList[0].retailPrice = obj.retailPriceStr;
                this.infoList[0].tradePrice = obj.tradePriceStr;
              }
            } else {
              this.infoList.forEach((vo) => {
                index = this.rules(vo, index, 1);
                if (index == 0) {
                  vo.skuCostPrice = vo.skuCostPriceStr;
                  vo.skuRetailPrice = vo.skuRetailPriceStr;
                  vo.skuTradePrice = vo.skuTradePriceStr;
                }
              });
            }
            if (index == 0) {
              let data  = {
                list:this.infoList,
                type:this.logType
              }
              updateInfoEdit(data).then((response) => {
                this.msgSuccess("修改成功");
                this.$emit("show", false, 1, this.editStocS);
              });
            }
          }
        } else {
          this.$emit("show", false, 0, this.editStocS);
        }
      },
      editStockNumber() {
        this.infoList.forEach((vo) => {
          if (this.editStocS != null && this.editStocS != "") {
            vo.stockNumber = this.editStocS;
          }
          if (this.editStocS != null && this.editStocS != "") {
            vo.skuStockNumber = this.editStocS;
          }
        });
      },
      editPrice() {
        this.infoList.forEach((vo) => {
          if (this.logType == 0) {
            if (this.editCost != null && this.editCost != "") {
              vo.costPriceStr = this.editCost;
            }
            if (this.editTrade != null && this.editTrade != "") {
              vo.tradePriceStr = this.editTrade;
            }
            if (this.editRetail != null && this.editRetail != "") {
              vo.retailPriceStr = this.editRetail;
            }
          } else if (this.logType == 1) {
            if (this.editCost != null && this.editCost != "") {
              vo.skuCostPriceStr = this.editCost;
            }
            if (this.editRetail != null && this.editRetail != "") {
              vo.skuRetailPriceStr = this.editRetail;
            }
            if (this.editTrade != null && this.editTrade != "") {
              vo.skuTradePriceStr = this.editTrade;
            }
          }
        });
      },
      getLogList() {
        if (this.infoList.length > 0) {
          this.open = false;
          this.queryParams.productUid = this.uid;
          if (this.logType == 0) {
            this.queryParams.type = "modifyInventory";
          } else if (this.logType == 1) {
            this.queryParams.type = "revisePrice";
          } else {
            this.queryParams.type = "all";
          }
          getLog(this.queryParams).then((response) => {
            this.logList = response.rows;
            this.total = response.total;
            this.open = true;
          });
        }
      },
      typeFormat(row, column) {
        return this.selectDictLabel(this.logTypeOption, row.operateType);
      },
      rules(obj, index, sku) {
        if (sku == 0) {
          if (obj.showPriceStr == "" || obj.showPriceStr == null) {
            this.$message.error("划线价不能为空！");
            return 1;
          }
          if (obj.costPriceStr == "" || obj.costPriceStr == null) {
            this.$message.error("供货价不能为空！");
            return 1;
          }
          if (obj.retailPriceStr == "" || obj.retailPriceStr == null) {
            this.$message.error("零售价不能为空！");
            return 1;
          }
          if (obj.tradePriceStr == "" || obj.tradePriceStr == null) {
            this.$message.error("批发价不能为空！");
            return 1;
          }
          return index;
        } else {
          if (obj.skuCostPriceStr == "" || obj.skuCostPriceStr == null) {
            if (index == 0) {
              this.$message.error("供货价不能为空！");
            }
            return 1;
          }
          if (obj.skuRetailPriceStr == "" || obj.skuRetailPriceStr == null) {
            if (index == 0) {
              this.$message.error("零售价不能为空！");
            }
            return 1;
          }
          if (obj.skuTradePriceStr == "" || obj.skuTradePriceStr == null) {
            if (index == 0) {
              this.$message.error("批发价不能为空！");
            }
            return 1;
          }
          return index;
        }
      },
    },
  };
</script>

<style scoped>
  .div-show {
    display: none;
  }
</style>
